<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="handleSelectAll"> 全选
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.selected"> {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 初始化数据
const items = ref([
  { label: '选项 1', selected: false },
  { label: '选项 2', selected: false },
  { label: '选项 3', selected: false }
]);

// 全选框状态
const selectAll = ref(false);

// 处理全选框变化
const handleSelectAll = () => {
  items.value.forEach(item => {
    item.selected = selectAll.value;
  });
};

// 监听单个选项变化
watch(() => items.value.map(item => item.selected), (newValues) => {
  selectAll.value = newValues.every(value => value);
}, { deep: true });
</script> 